<template>
  <el-dialog title="发布" :visible.sync="releaseDialogVisible" append-to-body v-if="releaseVisible"
    class="JNPF-dialog JNPF-dialog_center jnpf-release-dialog" lock-scroll width="600px"
    @close='close'>
    <el-form ref="releaseForm" :model="releaseQuery" :rules="releaseQueryRule" label-position="top"
      label-width="50px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="主页门户" name="first">
          <el-alert title="将该门户发布至应用主页门户" type="warning" :closable="false" show-icon />
          <div class="release-main">
            <div class="release-item">
              <el-form-item>
                <div class="top-item" :class="{ active: releaseQuery.pcPortal === 1 }"
                  @click="selectToggle('pcPortal')">
                  <i class="item-icon icon-ym icon-ym-pc"></i>
                  <p class="item-title">桌面端</p>
                  <div class="icon-checked">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="应用" prop="pcPortalSystemId" v-if="releaseQuery.pcPortal">
                <el-select v-model="releaseQuery.pcPortalSystemId" multiple placeholder="请选择应用"
                  @change="portalChange($event,'pcPortalSystemId')">
                  <el-option v-for="item in treeData" :key="item.id" :label="item.fullName"
                    :value="item.id" :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="已发布应用" v-if="currRow.pcPortalIsRelease">
                <div class="released">{{ currRow.pcPortalReleaseName }}</div>
              </el-form-item>
            </div>
            <div class="release-item">
              <el-form-item>
                <div class="top-item" :class="{ active: releaseQuery.appPortal === 1 }"
                  @click="selectToggle('appPortal')">
                  <i class="item-icon icon-ym icon-ym-mobile"></i>
                  <p class="item-title">移动端</p>
                  <div class="icon-checked">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="应用" prop="appPortalSystemId" v-if="releaseQuery.appPortal">
                <el-select v-model="releaseQuery.appPortalSystemId" multiple placeholder="请选择应用"
                  @change="portalChange($event,'appPortalSystemId')">
                  <el-option v-for="item in treeAppData" :key="item.id" :label="item.fullName"
                    :value="item.id" :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="已发布应用" v-if="currRow.appPortalIsRelease">
                <div class="released">{{ currRow.appPortalReleaseName }}</div>
              </el-form-item>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="应用菜单" name="second">
          <el-alert title="将该门户发布至应用菜单" type="warning" :closable="false" show-icon />
          <div class="release-main">
            <div class="release-item">
              <el-form-item>
                <div class="top-item" :class="{ active: releaseQuery.pc === 1 }"
                  @click="selectToggle('pc')">
                  <i class="item-icon icon-ym icon-ym-pc"></i>
                  <p class="item-title">桌面端</p>
                  <div class="icon-checked">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="上级" v-if="releaseQuery.pc" prop="pcModuleParentId">
                <JnpfTreeSelect v-model="releaseQuery.pcModuleParentId" :options="treeDataSystem"
                  multiple checkStrictly placeholder="请选择上级"
                  @change="treeSelectChange(arguments,'pc')" />
              </el-form-item>
              <el-form-item label="已发布菜单路径" v-if="currRow.pcIsRelease">
                <div class="released">{{ currRow.pcReleaseName }}</div>
              </el-form-item>
            </div>
            <div class="release-item">
              <el-form-item>
                <div class="top-item" :class="{ active: releaseQuery.app === 1 }"
                  @click="selectToggle('app')">
                  <i class="item-icon icon-ym icon-ym-mobile"></i>
                  <p class="item-title">移动端</p>
                  <div class="icon-checked">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="上级" prop="appModuleParentId" v-if="releaseQuery.app">
                <JnpfTreeSelect v-model="releaseQuery.appModuleParentId"
                  :options="appTreeDataSystem" placeholder="请选择上级"
                  @change="treeSelectChange(arguments,'app')" multiple checkStrictly />
              </el-form-item>
              <el-form-item label="已发布菜单路径" v-if="currRow.appIsRelease">
                <div class="released">{{ currRow.appReleaseName }}</div>
              </el-form-item>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" :loading="releaseBtnLoading" @click="releaseModel">
        {{$t('common.confirmButton')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  Release
} from "@/api/system/portal";
import { mapGetters } from "vuex";
import { getSystemListFilter } from '@/api/onlineDev/portal'
import { getMenuSelectorFilter } from '@/api/system/menu'

export default {
  props: [],
  name: 'releaseDialog',
  data() {
    return {
      releaseDialogVisible: false,
      releaseBtnLoading: false,
      currRow: {},
      releaseQuery: {
        pc: 1,
        app: 1,
        pcModuleParentId: [],
        appModuleParentId: [],
        pcPortal: 1,
        appPortal: 1,
        pcPortalSystemId: [],
        appPortalSystemId: [],
      },
      treeData: [],
      treeAppData: [],
      appTreeData: [],
      pcSystemId: "",
      appSystemId: "",
      treeDataSystem: [],
      appTreeDataSystem: [],
      pcPortalSystemId: [],
      appPortalSystemId: [],
      activeName: 'first',
      isRelease: 0,
      pcIsRelease: 0,
      pcPortalIsRelease: 0,
      appIsRelease: 0,
      appPortalIsRelease: 0,
      releaseVisible: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    releaseQueryRule() {
      let newReleaseQueryRule = {}
      if (!this.pcPortalIsRelease) newReleaseQueryRule.pcPortalSystemId = [
        { required: true, message: '应用不能为空', trigger: 'change', type: 'array' }
      ]
      if (!this.appPortalIsRelease) newReleaseQueryRule.appPortalSystemId = [
        { required: true, message: '应用不能为空', trigger: 'change', type: 'array' }
      ]
      if (!this.pcIsRelease) newReleaseQueryRule.pcModuleParentId = [
        { required: true, message: '上级不能为空', trigger: 'change', type: 'array' }
      ]
      if (!this.appIsRelease) newReleaseQueryRule.appModuleParentId = [
        { required: true, message: '上级不能为空', trigger: 'change', type: 'array' }
      ]
      return newReleaseQueryRule
    }
  },
  methods: {
    close() {
      this.releaseBtnLoading = false
      this.releaseVisible = false
    },
    releaseModel() {
      if (!this.releaseQuery.pc && !this.releaseQuery.app && !this.releaseQuery.pcPortal && !this.releaseQuery.appPortal) return this.$message.error('请至少选择一个发布类型')
      this.$refs['releaseForm'].validate(res => {
        if (!res) {
          if ((this.releaseQuery.pcPortalSystemId.length || !this.releaseQuery.pc) && (this.releaseQuery.appPortalSystemId.length || !this.releaseQuery.appPortal) && !this.releaseQuery.pcModuleParentId.length && !this.releaseQuery.appModuleParentId.length)
            return this.$message.error('应用菜单的上级必填')
          if (!this.releaseQuery.pcPortalSystemId.length && !this.releaseQuery.appPortalSystemId.length && (this.releaseQuery.pcModuleParentId.length || !this.releaseQuery.pc) && (this.releaseQuery.appModuleParentId.length || !this.releaseQuery.app))
            return this.$message.error('主页门户的应用必填')
        } else {
          if (!this.currRow.isRelease) return this.release()
          this.$confirm('发布确定后会覆盖当前线上版本且进行门户同步，是否继续？', '提示', {
            type: 'warning'
          }).then(() => {
            setTimeout(() => {
              this.release()
            }, 200)
          }).catch(() => { });
        }
      })
    },
    portalChange(val, key) {
      this.releaseQuery[key] = val || []
    },
    handleClick() {
      this.$refs['releaseForm'] && this.$refs['releaseForm'].clearValidate()
    },
    openRelease(row) {
      this.releaseBtnLoading = false
      this.releaseVisible = true
      this.currRow = row
      this.activeName = 'first'
      this.releaseDialogVisible = true
      this.pcSystemId = ""
      this.appSystemId = ""
      this.isRelease = row.isRelease || 0
      this.pcIsRelease = row.pcIsRelease || 0
      this.appIsRelease = row.appIsRelease || 0
      this.pcPortalIsRelease = row.pcPortalIsRelease || 0
      this.appPortalIsRelease = row.appPortalIsRelease || 0
      let platformRelease = row.platformRelease ? JSON.parse(row.platformRelease) : {}
      this.$nextTick(() => {
        this.$refs['releaseForm'] && this.$refs['releaseForm'].clearValidate()
      })
      this.releaseQuery = {
        pc: platformRelease.pc === 0 ? 0 : 1,
        app: platformRelease.app === 0 ? 0 : 1,
        pcModuleParentId: [],
        appModuleParentId: [],
        pcPortal: platformRelease.pcPortal === 0 ? 0 : 1,
        appPortal: platformRelease.appPortal === 0 ? 0 : 1,
        pcPortalSystemId: [],
        appPortalSystemId: [],
      }
      this.getSystemOptions(row.id)
      this.getAppSystemOptions(row.id)
      this.getMenuSelector(row.id)
      this.getAPPMenuSelector(row.id)
    },
    getSystemOptions(id) {
      getSystemListFilter({ category: 'Web' }, id).then(res => {
        this.treeData = res.data.list || [];
      })
    },
    getAppSystemOptions(id) {
      getSystemListFilter({ category: 'App' }, id).then(res => {
        this.treeAppData = res.data.list || [];
      })
    },
    selectToggle(key) {
      this.releaseQuery[key] = this.releaseQuery[key] === 1 ? 0 : 1
      const type = key == 'pc' ? 'pcModuleParentId' : key == 'app' ? 'appModuleParentId' : key == 'pcPortal' ? 'pcPortalSystemId' : 'appPortalSystemId'
      this.$nextTick(() => {
        this.$refs['releaseForm'] && this.$refs['releaseForm'].clearValidate(type)
      })
    },
    treeSelectChange(data, type) {
      const systemId = data[1].systemId
      this[type] = systemId
    },
    // 发布菜单
    release() {
      this.releaseBtnLoading = true
      let platform = {
        pc: this.releaseQuery.pc,
        app: this.releaseQuery.app,
        pcPortal: this.releaseQuery.pcPortal,
        appPortal: this.releaseQuery.appPortal,
      }
      let query = {
        ...this.releaseQuery,
        pcSystemId: this.pcSystemId,
        appSystemId: this.appSystemId,
        platformRelease: JSON.stringify(platform)
      }
      Release(this.currRow.id, query).then(res => {
        this.$message({
          type: 'success',
          message: res.msg,
          duration: 1000,
          onClose: () => {
            this.releaseBtnLoading = false
            this.releaseDialogVisible = false
            this.releaseVisible = false
            this.$emit('release', true)
          }
        });

      }).catch(() => { this.releaseBtnLoading = false })
    },
    getMenuSelector(id) {
      getMenuSelectorFilter({ category: 'Web' }, id).then(res => {
        this.treeDataSystem = res.data.list
      })
    },
    getAPPMenuSelector(id) {
      getMenuSelectorFilter({ category: 'App' }, id).then(res => {
        this.appTreeDataSystem = res.data.list || []
        for (let index = 0; index < this.appTreeDataSystem.length; index++) {
          const item = this.appTreeDataSystem[index];
          if (item.type == 0) {
            item.disabled = true
          }
        }
      })
    },
  }
}
</script>
